<script>
//组合式：所有的函数（自定义函数，计算属性，监听） 定义数据都写在setup()函数里
//并且所有的需要调用的方法及数据都必须返回return{a,b,c}
//因为定义的数据及方法都在setup 中，所以引用方法或者数据时不用this
//vue3版本
import {reactive, ref,watch} from 'vue'
export default{
    setup(){
        let str=ref("hello")
        let list=reactive([])
        let obj =reactive({})
        let cou =ref(0)
        let a=ref(1)
        let b=ref(0)
        let c=ref(0)
        let d =ref(0)
        let say=ref("老北京鸡肉卷真好吃")
        const add=()=>{
            c.value=a.value+b.value;
        }
        const one=watch(say,(new1,old)=>{
            console.log(new1,old)
        },)
        return {str,list,obj,cou,a,b,c,d,add,say}
    }
}
</script>
<template>
    <h1>组合式API-Demo12</h1>
    <p>a:{{a}}</p>
    <p>d:{{d}}</p>
    <input type="text" v-model.number="a" @input="add"/>+
    <input type="text" v-model.number="b" @input="add"/>={{c}}
    <br>
    <input type="text" v-model.trim="say"/>
</template>
<style></style>